<template>
  <a-modal
    :title="$t('门票消费记录')"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    class="modal_title"
    v-drag
  >
    <template slot="footer">
      <a-button key="come" @click="handleCancel">{{ $t('关闭') }}</a-button>
    </template>
    <a-spin style="min-height: 678px" :spinning="confirmLoading" ref="modalcontent" class="tableSpinPadding">
      <div style="margin: 0 10px">
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :xl="12" :lg="12" :md="12" :sm="24">
                <a-form-item :label="$t('业务时间')">
                  <j-date
                    :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                    dateFormat="YYYY-MM-DD HH:mm:ss"
                    :placeholder="$t('请选择开始时间')"
                    class="query-group-cust"
                    v-model="queryParam.createTime_begin"
                  ></j-date>
                  <span class="query-group-split-cust"></span>
                  <j-date
                    :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                    dateFormat="YYYY-MM-DD HH:mm:ss"
                    :placeholder="$t('请选择结束时间')"
                    class="query-group-cust"
                    v-model="queryParam.createTime_end"
                  ></j-date>
                </a-form-item>
              </a-col>
              <a-col :xl="8" :lg="9" :md="10" :sm="24">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">{{ $t('查询') }}</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{
                    $t('重置')
                  }}</a-button>
                  <a @click="handleToggleSearch" style="margin-left: 8px">
                    {{ toggleSearchStatus ? $t('收起') : $t('展开') }}
                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                  </a>
                  <a-button
                    v-has="'BisMemberTicketController:export'"
                    type="primary"
                    icon="download" :loading="exloading"
                    style="margin-left: 8px"
                    @click="handleExportXls($t('门票消费记录'))"
                    >{{$t('导出')}}</a-button
                  >
                </span>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <template v-if="toggleSearchStatus">
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item :label="$t('设备名称(编码)')">
                    <a-select show-search :filter-option="false" @search="handleSearch" v-model="queryParam.deviceId">
                      <a-select-option :value="item.id" :key="index" v-for="(item, index) in deviceList">
                        <span>{{ item.name }}</span>
                        <span v-if="item.name != $t('全部')">({{ item.id }})</span>
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item :label="$t('操作员')">
                    <a-select v-model="queryParam.createBy">
                      <a-select-option v-for="(item, index) in userList" :key="index" :value="item.value">
                        {{ item.title }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </template>
            </a-row>
          </a-form>
        </div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          class="j-table-force-nowrap"
          :loading="loading"
          :pagination="ipagination"
          @change="handleTableChange"
        >
          <template slot="footer">
            <div style="font-weight: bold">
              <span style="margin-left: 15px; margin-right: 5px">{{ $t('业务笔数') }}：</span>
              <span>{{ totalInfo.count }}</span>
              <span style="margin-left: 15px; margin-right: 5px">{{ $t('扣票次数') }}：</span>
              <span>{{ totalInfo.number }}</span>
            </div>
          </template>
        </a-table>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import '@/assets/less/TableExpand.less'
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { getAction } from '@/api/manage'

export default {
  name: 'TicketDetailsModal',
  mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      moment,
      width: 1200,
      visible: false,
      disableSubmit: false,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
      columns: [
        {
          title: this.$t('业务时间'),
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: this.$t('交易前次数'),
          align: 'center',
          dataIndex: 'beforeNumber',
          customRender: (text, record) => {
            if (record.form == 4) {
              return '不限次'
            } else {
              return text
            }
          },
        },
        {
          title: this.$t('扣票次数'),
          align: 'center',
          dataIndex: 'number',
        },
        {
          title: this.$t('交易后次数'),
          align: 'center',
          dataIndex: 'afterNumber',
          customRender: (text, record) => {
            if (record.form == 4) {
              return this.$t('不限次')
            } else {
              return text
            }
          },
        },
        {
          title: this.$t('设备名称(编码)'),
          align: 'center',
          dataIndex: 'deviceId_dictText',
          customRender: function (text, record) {
            if (text) {
              return record.deviceId_dictText + '（' + record.deviceId + '）'
            }
            return ''
          },
        },
        {
          title: this.$t('操作员'),
          align: 'center',
          dataIndex: 'createBy',
        },
        {
          title: this.$t('备注'),
          align: 'center',
          dataIndex: 'comment',
        },
      ],
      url: {
        list: '/member/bisMemberTicketUse/list',
        totalUrl: 'member/bisMemberTicketUse/total',
        exportXlsUrl: "/member/bisMemberTicketUse/exportXls",
      },
      isfooter: true,
      totalInfo: {
        count: 0,
        number: 0,
      },
      isCustom: true,
      deviceList: [],
      userList: [],
    }
  },
  methods: {
    handleSearch(value) {
      let query = {}
      if (value) {
        query.deviceInfo = value
      }
      getAction('/device/bisDeviceInfo/list', query).then((res) => {
        if (res.success) {
          this.deviceList = res.result.records
          this.deviceList.unshift({ id: '', name: this.$t('全部') })
        }
      })
    },
    edit(record) {
      this.visible = true
      this.model = Object.assign({}, record)
      initDictOptions('sys_user,realname,realname').then((res) => {
        if (res.success) {
          this.userList = res.result
          this.userList.unshift({ title: this.$t('全部'), value: '' })
        }
      })
      this.handleSearch('')
      this.searchReset()
    },
    searchReset() {
      this.queryParam = {
        memberId: this.model.memberId,
        ticketInfo: this.model.ticketNo,
        deviceId: '',
        createBy: '',
      }
      this.handleSearch('')
      this.loadData(1)
    },
    close() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>
<style scoped>
</style>